<template>
  <div class="login">
    <div class="card">
      <div class="card-con">
        <div class="header">
          <h3 class="title">博客园用户登录</h3>
          <img
            class="logo"
            src="https://account.cnblogs.com/images/login-sign.svg"
          />
          <p class="desc">代码改变世界</p>
        </div>
        <div class="content">
          <!-- <el-tabs v-model="activeName" stretch> -->
            <!-- <el-tab-pane label="密码登录" name="username"> -->
              <el-form
                size="small"
                ref="loginForm"
                :model="loginForm"
                :rules="rules"
                class="login-form"
              >
                <el-form-item prop="account">
                  <el-input
                    v-model="loginForm.account"
                    placeholder="登录用户名/邮箱"
                  ></el-input>
                  <span class="form-item-tip">忘记登录用户名</span>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model="loginForm.password"
                    placeholder="密码"
                    type="password"
                  ></el-input>
                  <span class="form-item-tip">忘记密码</span>
                </el-form-item>
              </el-form>
            <!-- </el-tab-pane> -->
            <!-- <el-tab-pane class="tab-item" label="短信登录" name="phone" -->
              <!-- >短信登录</el-tab-pane -->
            <!-- > -->
          <!-- </el-tabs> -->
        </div>
        <div class="footer">
          <el-checkbox>记住我</el-checkbox>
          <el-row>
            <el-col :span="24" class="login-btn">
              <el-button
                class="plr30"
                size="mini"
                type="primary"
                @click="onSubmit"
                >登录</el-button
              >
            </el-col>
          </el-row>
          <!-- <div class="other-login">
            <span>第三方登录</span>
            <div class="other-login-icons">
              <span>
                <img src="../assets/WeChat.png" alt="微信" />
              </span>
              <span>
                <img src="../assets/QQ.png" alt="QQ" />
              </span>
              <span>
                <img src="../assets/GitHub.png" alt="GitHub" />
              </span>
            </div>
          </div> -->
          <el-row style="padding-top:30px;">
            <el-col :span="24">
              没有账户，<router-link to="/registry">立即注册</router-link>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "username",
      loginForm: {
        account: "lisi",
        password: "123456",
      },
      rules: {
        account: [
          {
            required: true,
            message: "请输入登录用户名或邮箱",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$http.post("/sys/login", {
            ...this.loginForm,
          }).then(res => {
            console.log(res)
            if(res.status >= 200 && res.status < 300 || res.status === 304){
              if(res.data.code === 2) {
                this.$message.success(res.data.message)
                this.$router.push({
                  name: 'Home'
                })
              }else {
                this.$message.error(res.data.message)
              }
            }else {
                this.$message.error(res.statusText)
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.login {
  display: flex;
  align-items: center;
  height: 100vh;
}
.card {
  width: 420px;
  min-height: 400px;
  background-color: #fff;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  padding: 16px;
  box-sizing: border-box;
}
.card-con {
  padding: 16px 32px;
}
.title {
  font-size: 24px;
  color: #393b3d;
  font-weight: 100;
  margin: 0;
}
.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 16px 0;
}
.logo {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin-top: 32px;
}
.desc {
  font-size: 15px;
  margin-top: 18px;
  color: #7f8085;
}
.login-form {
  width: 100%;
}
.content >>> .el-tabs__item {
  color: rgba(0, 0, 0, 0.87);
  opacity: 0.6;
}
.content >>> .el-tabs__item.is-active {
  color: rgba(0, 0, 0, 0.87);
  opacity: 0.6;
}
.login-btn {
  text-align: center;
  padding-top: 6px;
}
.plr30 {
  padding-left: 30px;
  padding-right: 30px;
  font-size: 16px;
}
a {
  text-decoration: none;
}
.other-login {
  display: flex;
  justify-content: space-between;
  margin-top: 38px;
  margin-bottom: 6px;
}
.other-login-icons {
  display: inline-flex;
}
.other-login-icons img {
  width: 16px;
  border-radius: 50%;
}
.other-login-icons span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.12);
  margin-left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.other-login-icons span:hover {
  cursor: pointer;
}
.footer {
  padding-top: 10px;
}
.form-item-tip {
  position: absolute;
  right: 0;
  bottom: -25px;
  font-size: 12px;
  color: #3494fc;
  cursor: pointer;
}
a {
  color: #3494fc;
}
</style>
